<template>
  <view class="login-container">
    <image class="logo" src="/static/logo.png"></image>
    <view class="login-form">
      <u-form>
        <u-form-item label="用户名/手机号">
          <u-input v-model="username" placeholder="请输入用户名/手机号"></u-input>
        </u-form-item>
        <u-form-item label="密码">
          <u-input v-model="password" type="password" placeholder="请输入密码"></u-input>
        </u-form-item>
        <u-button type="primary" @click="login">登录</u-button>
      </u-form>
    </view>
    <view class="third-party-login">
      <text>使用第三方账号登录</text>
      <u-icon name="wechat" @click="wechatLogin"></u-icon>
      <u-icon name="weibo" @click="weiboLogin"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录逻辑
      console.log('登录', this.username, this.password);
    },
    wechatLogin() {
      // 微信登录逻辑
      console.log('微信登录');
    },
    weiboLogin() {
      // 微博登录逻辑
      console.log('微博登录');
    }
  }
};
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.logo {
  height: 100rpx;
  width: 100rpx;
  margin-top: 100rpx;
  margin-bottom: 50rpx;
}

.login-form {
  width: 80%;
  max-width: 300px;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.third-party-login {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.third-party-login text {
  margin-right: 20rpx;
  color: #8f8f94;
}

.third-party-login u-icon {
  margin-left: 10rpx;
  color: #8f8f94;
}
</style>